<template>
  <div>
      <h1>商家销售额统计</h1>
      <div class="charts">
        <div id="barGraph" style="height: 350px;"></div>
      </div>
      <div class="charts">
        <div id="pieGraph" style="height: 350px;"></div>
      </div>
  </div>
</template>
<script>
  let echarts = require('../../../../static/plugins/echarts-3.8.5/echarts.common.min.js')
  export default {
    name: 'WelcomePage',
    data () {
      return {
        showData: [],
        showOnceData: [],
        showYearData: 0,
        showOnceYearData: 0
      }
    },
    mounted () {
      this.getMonthList()
      // this.getYearList()
    },
    methods: {
      async getMonthList () {
        // 具体月份入驻量
        let that = this
        await this.$http({
          url: this.$http.adornUrl('/diancan/ordermain/SalesMoneyByMonth'),
          method: 'get',
          params: this.$http.adornParams({
            year: new Date().getFullYear()
          })
        }).then(data => {
          that.showData = data.data.count
          that.showData.forEach(ele => {
            that.showYearData += ele
          })
          this.drawBar()
          this.drawPie()
        })
        this.$http({
          url: this.$http.adornUrl('/diancan/ordermain/SalesMoneyByMonth'),
          method: 'get',
          params: this.$http.adornParams({
            year: 2019
          })
        }).then(data => {
          that.showOnceData = data.data.count
          that.showOnceData.forEach(ele => {
            that.showOnceYearData += ele
          })
          this.drawBar()
          this.drawPie()
        })
      },
      drawBar () {
      // 基于dom，初始化echarts实例
        let barGraph = echarts.init(document.getElementById('barGraph'))
      // 绘制图表
        barGraph.setOption({
          title: {
            text: '每月商家销售额统计',
            left: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c}'
          },
          legend: {
            left: 'center',
            data: ['本年', '上年'],
            bottom: 0
          },
          xAxis: {
            type: 'category',
            name: 'x',
            splitLine: {show: false},
            data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
          },
          grid: {
            left: '1%',
            right: '2%',
            bottom: '8%',
            containLabel: true
          },
          yAxis: {
            // type: 'category',
            // name: 'y',
            // splitLine: {show: true},
            // data: ['100', '200', '300', '400', '500', '600', '700', '800', '900', '1000']
          },
          series: [
            {
              name: '本年',
              type: 'line',
              data: this.showData
            },
            {
              name: '上年',
              type: 'line',
              data: this.showOnceData
            }
          ]
        })
      },
      drawPie () {
        let pieGraph = echarts.init(document.getElementById('pieGraph'))
        pieGraph.setOption({
          title: {
            text: '去年今年数据比较',
            x: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            orient: 'vertical',
            left: 'left',
            data: ['去年', '今年']
          },
          series: [
            {
              name: '数据量/百分比',
              type: 'pie',
              radius: '55%',
              center: ['50%', '60%'],
              data: [
                {value: this.showOnceYearData, name: '去年'},
                {value: this.showYearData, name: '今年'}
              ],
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        })
      }
    }
  }
</script>
<style>
</style>
